<template>
	<view>
		<!-- 地址选择 -->
		<view class="addr-select-box">
			<view class="addr-box" v-if="address.id" @tap="changeAddr()">
				<view class="addr-info">
					<view class="addr-user-order">
						<text>收货人: {{address.name}}</text>
						<text>{{address.mobile}}</text>
					</view>
					<view class="addr_area">
						<view class="addr-addr">
							收货地址:{{address.province_name}}{{address.city_name}}{{address.area_name}}{{address.address}}
						</view>
						<!-- <i class="icon icon-right">&#xe638;</i> -->
						<image src="../../static/image/userindex/jt02.png" mode=""></image>
					</view>

				</view>
			</view>
			<view class="empty-addr" v-else @tap="addAddr()">
				<view class="addr-icon">
					<!-- <i class="icon">&#xe61f;</i> -->
					<image src="../../static/image/order/addArea.png" mode=""></image>
				</view>
				<view class="addr-info">
					新增收货地址
				</view>
				<view class="addr-icon add-icon-right-j">
					<i class="icon">&#xe645;</i>
				</view>
			</view>
			<image class="glpic" src="../../static/image/order/gl01-2.png" mode=""></image>
		</view>
		<!-- 隔离图片 -->
		<view class="line" style="height: 10upx; background-color: #F9F9F9;">

		</view>
		<!-- 订单商品 -->
		<view class="qqqqq">

			<view class="produce_dz" v-for="(item , key) in goods_info">
				<view class="ckgd">
					<goods-list :goods_list="setGoodsArr(item)" :is_same="item.is_same"></goods-list>
					<view class="see-more" @tap="seeMore(key)"><text>更多</text>
						<i class="icon" v-if="!item.show">&#xe70d;</i>
						<i class="icon" v-else>&#xe70c;</i>
					</view>
				</view>
				<!--  v-if="item.show" -->
				<view class="made-info" v-if="item.show">
					<!-- 标题 -->
					<view class="jt_t">

					</view>
					<!-- 标题 -->
					<view class="made-title">
						<view class="made-title-icon"></view>
						<view class="made-title-txt">定制信息</view>
					</view>
					<!-- 定制信息 -->
					<view class="made-info-made" v-if="item.is_same">
						<view class="made-item" v-for="made_item in item.made_info[0]">
							<view class="unit-info"><text>部件:</text>{{made_item.unit_name}}</view>
							<view class="material-info"><text>材质：</text>{{made_item.material_name}}</view>
							<view class="color-info"><text>颜色：</text>{{made_item.color_name}}</view>
						</view>
					</view>
					<view v-else>
						<view :class="keys == 0 ? 'made-info-made' : 'made-info-made made-right'"
							v-for="(items,keys) in item.made_info">
							<view class="made-area"><i class="icon">&#xe68e;</i>{{keys == 0 ? '左脚' : '右脚'}}</view>
							<view class="made-item" v-for="made_item in items">
								<view class="unit-info"><text>部件:</text>{{made_item.unit_name}}</view>
								<view class="material-info"><text>材质：</text>{{made_item.material_name}}</view>
								<view class="color-info"><text>颜色：</text>{{made_item.color_name}}</view>
							</view>
						</view>
					</view>
					<view class="made-info-made made-words" v-if="item.words_info.length">
						<view class="made-area">绣字信息</view>
						<template v-for="words_item in item.words_info" v-if="words_item.txt">
							<view class="made-item">
								<view class="unit-info"><text>区域:</text>{{words_item.name}}</view>
								<view class="material-info"><text>字体：</text>{{words_item.font}}</view>
								<view class="color-info"><text>文字：</text>{{words_item.txt}}</view>
							</view>
						</template>
					</view>
				</view>
			</view>
		</view>
		<!-- 分割线 -->
		<view class="fgxian" v-if="fg_show">

		</view>
		<!-- 其他信息 -->
		<view class="order-add-ul">
			<view class="order-add-li">
				<view class="add-li-label">商品总额</view>
				<view class='add-li-body'>￥{{order_info.total_price}}</view>
			</view>
			<view class="order-add-li">
				<view class="add-li-label">商品数量</view>
				<view class='add-li-body'>{{produceNum}}</view>
			</view>
			<view class="order-add-li">
				<view class="add-li-label">运费</view>
				<view class='add-li-body'>免费</view>
			</view>
			<picker @change="selectConfirm" :value="pickerIndex" :range="levelList">
				<view class="" style="width: 100%;display: flex;justify-content: space-between;color: #999;height: 72rpx;line-height: 72rpx;padding-top: 10rpx;">
					<view class="" style="float: left;width: 100rpx;" @tap="levelShow = !levelShow">身份</view>
					<view class='add-li-body'>{{levelText}} <i   style="font-size: 14px;font-family: iconfont;font-style: normal;">&#xe638;</i></view>

				</view>

			</picker>

			<view class="order-add-li">
				<view class="add-li-label" @tap="inputCoupon()">优惠码
					<!-- <i class="icon icon-right">&#xe638;</i> -->
					<i class="icon" v-if="!coupon_input">&#xe616;</i>
				
					<i class="icon" v-else>&#xe81b;</i>
				</view>
				<view class='add-li-body-price' v-if="dis_price">-￥{{dis_price}}</view>
			</view>
			<view class="order-add-li input-coupon-li" v-if="coupon_input">
				<view class="copun-input">
					<input placeholder="请输入优惠码" placeholder-style="color:#e1e1e1" v-model="code" />
				</view>
				<view class="copunt-btn" @tap="useCoupon()">应用</view>
			</view>
			<view class="order-add-li">
				<view class="add-li-label">买家留言</view>
				<view class='add-li-body'>
					<input placeholder="选填,请和商家协同一致" v-model="memo" class='add-txtarea'
						placeholder-style="color:#e1e1e1" />
				</view>
			</view>
		</view>
		<!-- 结算方式 -->
		<!-- <view class="">
			<radio-group @change="changePay">
				<view class="word-form-content pay-way">
					<i class="icon">&#xe607;</i>
					<text>微信支付</text>
					<radio value="1" :checked="true" style="transform: scale(0.6);" class='pay-way-check'/>
				</view>
			</radio-group>
		</view> -->
		<!-- 占位符 -->
		<view style="height: 210upx;"></view>
		<!-- 底部结算 -->
		<view class="bottom-calu">
			<view class="calu-bottom">
				<view class="calu-price">
					<view class="calu-total">共{{produceNum}}件商品</view>
					<!-- <text>合计：</text>
					<text>￥{{prodecePrice}}</text> -->
					<view class="calu-price-p">
						<span class="calu-price-po">合计 ：</span><span
							class="calu-price-pt">￥{{prodecePrice-dis_price < 0 ?'0':prodecePrice-dis_price}}</span>
					</view>
				</view>
				<view class="calu-btn" @tap="trueCalu()">确认结算</view>
			</view>
		</view>
		<!-- 底部操作栏 -->
		<!-- 遮罩层 -->
		<view class="goods-model" v-if="loading">
		</view>
		<web-load v-if="loading"></web-load>
	</view>
</template>

<script>
	import goodsList from '../../components/order/goods-list.vue';
	import webLoad from '../../components/unit/loading.vue';
	export default {
		components: {
			goodsList,
			webLoad
		},
		data() {
			return {
				fg_show: true,
				loading: true,
				order_id: 0,
				address: {
					id: 0
				},
				address_id: 0,
				coupon_input: false,
				dis_price: 0,
				order_info: {},
				goods_info: [],
				memo: '',
				code: '',
				pay_way: 1,
				produceNum: 0, // 商品数量
				prodecePrice: 0, // 商品价格
				pickerIndex: 0,
				levelList: ['男性成年(18岁以上男性)', '女性成年(18岁以上女性)', '青少年(18岁及以下)'],
				level:0,
				levelText:'请选择'
			}
		},
		onShow() {
			this.produceNum = 0
			this.prodecePrice = 0
			this.address_id = uni.getStorageSync('addr_id');
			if (this.address_id) this.getAddr();
			else this.getData();
		},

		onLoad(e) {

			this.order_id = e.order_id;
			if (!this.order_id) {
				this.toast('非法操作');
				setTimeout(() => {
					uni.navigateBack();
				}, 1000)
			}
		},
		watch: {
			address_id: {
				handler(v, old) {
					if (v == 0) return false;
					var goodsNum = this.goods_info
					for (var i in goodsNum) {
						this.produceNum += goodsNum[i].goods_num,
							this.prodecePrice += goodsNum[i].goods_num * goodsNum[i].goods_price
					}
				},
				deep: true
			}
		},
		methods: {

			//  查看更多
			seeMore(key) {
				this.fg_show = !this.fg_show
				this.goods_info[key].show = this.goods_info[key].show ? false : true;
				this.$forceUpdate()
			},
			//去结算
			trueCalu() {
				if(!this.level) return this.toast('请选择身份');
				this.ajax('order/trueCalu', {
					data: {
						id: this.order_id,
						addr_id: this.address.id,
						code: this.code,
						memo: this.memo,
						pay_way: this.pay_way,
						level:this.level
					},
					success: (res) => {
						if (res.code) {
							if (res.code) {
								this.toast('订单提交成功，正在跳转支付');
								if (res.msg.price <= 0) {
									uni.redirectTo({
										url: '/pages/order/list'
									})
									console.log(6666)
									return
								}
								setTimeout(() => {
									uni.redirectTo({
										url: '/pages/order/pay?order_id=' + res.msg.id +
											'&order_price=' + res.msg.price
									})
								}, 1000);
							}
						} else {
							return this.toast(res.msg)
						}
					}
				});
			},
			//使用优惠券码
			useCoupon() {
				if (!this.code) return this.toast('请输入优惠券码');
				this.ajax('order/checkCoupon', {
					data: {
						code: this.code
					},
					success: (res) => {
						if (res.code) {
							this.coupon_input = false;
							this.dis_price = res.msg.price;
						} else {
							return this.toast(res.msg);
						}
					}
				});
			},
			//获取地址信息
			getAddr() {
				this.ajax('address/getAddrInfo', {
					data: {
						id: this.address_id
					},
					success: (res) => {
						this.address = res.msg;
						uni.setStorageSync('addr_id', 0);
					}
				});
			},
			//获取商品信息
			getData() {
				this.ajax('order/orderSettlement', {
					data: {
						id: this.order_id
					},
					success: (res) => {
						console.log(res);
						this.address = res.msg.addr
						this.order_info = res.msg.order_info;
						this.goods_info = res.msg.order_goods;
						var goodsNum = res.msg.order_goods
						for (var i in goodsNum) {
							this.produceNum += goodsNum[i].goods_num,
								this.prodecePrice += goodsNum[i].goods_num * goodsNum[i].goods_price
						}
						this.loading = false
					}
				});
			},
			//添加地址
			addAddr() {
				uni.navigateTo({
					url: '/pages/address/add-addr'
				})
			},
			ceshi() {
				console.log(66666);
			},
			//选择地址
			changeAddr() {
				uni.navigateTo({
					url: '/pages/address/list?change=1'
				})
			},
			//输入优惠码
			inputCoupon() {
				console.log(222);
				this.coupon_input = this.coupon_input ? false : true;
			},
			//设置商品数组
			setGoodsArr(data) {
				var list = [];
				for (var i in data.made_info) {
					list.push(data);
				}
				return list;
			},
			//身份选择器
			selectConfirm(e) {
				this.levelText = this.levelList[e.detail.value];
				this.level = e.detail.value + 1;
				
				console.log(this.level);
			}
		}
	}
</script>

<style>
	@import url("../../static/css/order/add.css");
</style>